<template>
  <el-row :gutter="20" class="data-dictionary">
    <el-col :span="5" class="dict-wrap">
      <TypeTree @select-dict="updateSelect" />
    </el-col>
    <el-col :span="19" class="dict-wrap">
      <DictTable class="dict-table" :select-type="selectDictInfo" />
    </el-col>
  </el-row>
</template>
<script>
import TypeTree from "./components/TypeTree.vue";
import DictTable from "./components/DictTable.vue";

export default {
  name: "DataDictionary",
  components: {
    TypeTree,
    DictTable,
  },
  data() {
    return {
      // 选中的字典分类
      selectDictInfo: {},
    };
  },
  methods: {
    updateSelect(info) {
      this.selectDictInfo = info;
    },
  },
};
</script>
<style lang="scss" scoped>
.data-dictionary {
  // width: 100%;
  height: 100%;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.dict-wrap {
  height: 100%;
}

.dict-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.dict-info {
  flex: 1;
  overflow: hidden;
}
</style>
